{include file="base/header"}
<div class="layui-card">
    <div class="layui-card-body">
        <table id="tableId" lay-filter="power-table"></table>
    </div>
</div>
<script type="text/html" id="power-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>

</script>

<script type="text/html" id="power-xh">
 {{#if(d.pid == '0')  { }}
     {{ d.xh+1 }}
      {{# }else{ }} 
     |--- {{ d.xh+1 }}
    {{# } }}
</script>
<script type="text/html" id="power-bar" >
    {{#if(d.type == '0')  { }}
        <button class="pear-btn pear-btn-info pear-btn-sm" lay-event="addChild"><i class="layui-icon layui-icon-add-1"></i></button>
    {{# } }}
    <button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="pxset"><i class="layui-icon layui-icon-list"></i></button>
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
    
</script>

<script type="text/html" id="power-type">
    {{#if (d.type == '0') { }}
    <span>目录</span>
    {{# }else if(d.type == '1'){ }}
    <span>菜单</span>
    {{# }else if(d.type == '2'){ }}
    <span>按钮</span>
    {{# } }}
</script>

<script type="text/html" id="power-enable">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|关闭" lay-filter="user-enable"  {{ d.status ? 'checked' : '' }} />
</script>

<script type="text/html" id="icon">
 {{#if (d.pid == '0') { }}
    <i class="layui-icon {{d.icon}}"></i>
 {{# } }}
</script>
    <script>
        layui.use(['table', 'form', 'jquery', 'treetable'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let treetable = layui.treetable;

         

            window.render = function () {
                treetable.render({
                    treeColIndex: 1,
                    treeSpid: 0,
                    treeIdName: 'id',
                    treePidName: 'pid',
                    skin: 'line',
                    treeDefaultClose: false,
                    toolbar: '#power-toolbar',
                    elem: '#tableId',
                    url: "{:url('admin/operateset')}",  //getOperNp
                    page: false,
                    cols: [
                        [
                            { field: 'xh', minWidth: 100, title: '序号',templet: '#power-xh' },
                            { field: 'title', minWidth: 200, title: '权限名称' },
                            { field: 'icon', title: '图标', templet: '#icon' },
                            { field: 'type', title: '权限类型', templet: '#power-type' },
                            { field: 'status', title: '是否可用', templet: '#power-enable' },
                            { field: 'xh', title: '排序' },
                            { title: '操作', templet: '#power-bar', width: 200, align: 'right' }
                        ]
                    ]
                });
            }

            render();

            table.on('tool(power-table)', function (obj) {
                if (obj.event === 'remove') {
                    window.remove(obj);
                } else if (obj.event === 'edit') {
                    window.edit(obj);
                }else if(obj.event === 'addChild'){
                    window.addChild(obj);
                    
                }else if(obj.event=='pxset'){
                         window.pxset(obj);
                }
            })
                form.on('switch(user-enable)', function (obj) {
                    console.log(obj);
                    var id= this.value;
                    var status= obj.elem.checked ? 1 :0 ;
                    var str= status ? "已开启" : "已关闭";
                    postData("{:url('admin/setMenuStatus')}",{ id,status }).then(function(res){
                        if(res.code!=200){
                            layer.alert(res.message,{title:"提示"});
                            return;
                        }
                        layer.tips(str, obj.othis);
                    });

                });


            table.on('toolbar(power-table)', function (obj) {
                if (obj.event === 'add') {
                    window.add();
                } else if (obj.event === 'refresh') {
                    window.refresh();
                } else if (obj.event === 'batchRemove') {
                    window.batchRemove(obj);
                } else if (obj.event === 'expandAll') {
                    treetable.expandAll("#power-table");
                } else if (obj.event === 'foldAll') {
                    treetable.foldAll("#power-table");
                }
            });
        
            window.pxset=function(obj){
                 layer.open({
                    type: 2,
                    title: '排序（拖拽表格可进行排序）',
                    shade: 0.1,
                    area: ['600px', '400px'],
                    content: "{:url('admin/operatelst')}?pid="+obj.data.pid
                }); 
            }
            window.add = function () {
                layer.open({
                    type: 2,
                    title: '新增',
                    shade: 0.1,
                    area: ['550px', '500px'],
                    content: "{:url('admin/operateitem')}"
                });
            }
            window.addChild=function(obj){
                layer.open({
                    type: 2,
                    title: '新增',
                    shade: 0.1,
                    area: ['550px', '500px'],
                    content: "{:url('admin/operateitem')}?pid="+obj.data.id
                });
            }

            window.edit = function (obj) {
                layer.open({
                    type: 2,
                    title: '修改',
                    shade: 0.1,
                    area: ['550px', '550px'],
                    content: `{:url('admin/operateitem')}?id=${obj.data.id}&pid=${obj.data.pid}`
                }); //
            }
            window.remove = function (obj) {
                layer.confirm('确定要删除该权限', { icon: 3, title: '提示' }, function (index) {
                    layer.close(index);
                    let loading = layer.load();
                    postData("{:url('admin/operateDel')}",{id:obj.data.id}).then(function(res){
                            layer.close(loading);
                            if (res.code==200) {
                                layer.msg(res.message, { icon: 1, time: 1000 }, function () {
                                    obj.del();
                                });
                            } else {
                                layer.msg(res.message, { icon: 2, time: 1000 });
                            }
                    });
                });
            }

        })
    </script>
{include file="base/footer"}